<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix TooltipButton</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/TooltipButton.js"></script>
  </head>

  <body role="main">
    <div class="demo padded">
      <style>
        .tooltip {
          padding: 1em;
          white-space: nowrap;
        }
      </style>
      <p>
        These buttons have tooltips that appear when you hover over them, tap or
        click on them, or give them the keyboard focus.
      </p>
      <elix-tooltip-button>
        <span slot="source">1</span>
        <span class="tooltip">One</span>
      </elix-tooltip-button>
      <elix-tooltip-button>
        <span slot="source">2</span>
        <span class="tooltip">Two</span>
      </elix-tooltip-button>
      <elix-tooltip-button>
        <span slot="source">3</span>
        <span class="tooltip">Three</span>
      </elix-tooltip-button>
    </div>
  </body>
</html>
